<template>
  <div class="table-box">
    <ProTable ref="pTable" :columns="columns" :init-param="initParam" :request-api="getFlexjobsVoListApi">
      <template #tableHeader="scope">
        <el-button type="primary" :icon="CirclePlus" @click="handleOpenDialog(OptEnum.CREATE)"> 发布新岗位 </el-button>
        <el-button type="danger" :icon="Money" plain :disabled="!scope.isSelected" @click="batchOfflinePay(scope.selectedListIds)">
          多个岗位合并支付
        </el-button>
        <el-button type="danger" :icon="RefreshLeft" plain :disabled="!scope.isSelected" @click="clearTableSelect">
          清空所选
        </el-button>
      </template>
      <template #title="scope">
        <div class="job-box">
          <div class="job-title-box">
            <el-space alignment="start" style="width: 100%" :spacer="spacer">
              <span class="job-title">{{ scope.row.title }}</span>
              <el-tooltip effect="dark" content="企业项目标记" placement="top-start">
                <el-button :type="scope.row.flagCompany === 'Y' ? 'primary' : 'info'" :icon="House" circle text size="small" />
              </el-tooltip>
            </el-space>
          </div>
          <div class="job-address mtd-5">
            <el-space alignment="start" style="width: 100%" :spacer="spacer">
              <span class="job-info">{{ scope.row.cityName }}</span>
              <span class="job-info">{{ scope.row.areaName }}</span>
            </el-space>
          </div>
          <div class="job-tags">
            <el-tag v-for="tag in scope.row.tags?.split(',')" :key="tag" class="mx-1" :disable-transitions="false">
              {{ tag }}
            </el-tag>
          </div>
        </div>
      </template>
      <template #status="scope">
        <el-tag :type="(scope.row.status === sysEnum.SEVEN || scope.row.status === 40) ? 'danger' : 'primary'">
          {{ filterEnum(scope.row.status, flexJobStatusType) }}
        </el-tag>
        <div class="audit-content-box" v-if="scope.row.status === sysEnum.SEVEN">
          <span class="audit-title">原因：</span><span class="audit-content">{{ scope.row.auditContent || "" }}</span>
        </div>
      </template>
      <template #flagTalk="scope">
        <el-tag :type="scope.row.flagTalk === flagEnum.FLAG_TRUE ? 'primary' : 'info'">
          {{ scope.row.flagTalk === flagEnum.FLAG_TRUE ? "是" : "否" }}
        </el-tag>
      </template>
      <template #jobDate="scope">
        <div class="job-date-box">
          <div class="date-box">
            <span class="job-info">创建:</span><span class="job-data">{{ scope.row.createDate }}</span>
          </div>
          <div class="date-box">
            <span class="job-info">审核:</span><span class="job-data">{{ scope.row.auditDate }}</span>
          </div>
          <div class="date-box">
            <span class="job-info">开工:</span><span class="job-data">{{ scope.row.payDate }}</span>
          </div>
          <div class="date-box">
            <span class="job-info">完工:</span><span class="job-data">{{ scope.row.doneDate }}</span>
          </div>
        </div>
      </template>
      <template #worker="scope">
        <div class="apply-box">
          <span class="job-info">成交价:</span><span class="deal-price-info">{{ scope.row.dealAmt || "--" }}</span>
        </div>
      </template>
      <template #applyCnt="scope">
        <div class="view-box-wrapper">
          <div class="view-box">
            <span class="cnt-info">{{ scope.row.viewCnt || "0" }}</span><span class="cnt-title">浏览数</span>
          </div>
          <div class="apply-box">
            <span class="cnt-info">{{ scope.row.applyCnt || "0" }}</span><span class="cnt-title">申请数</span>
          </div>
        </div>
      </template>
      <template #comment="scope">
        <div class="comment-box">
          <span class="job-info">发岗人:</span>
          <el-rate class="comment-info" v-model="scope.row.pubScore" :colors="colors" size="small" />
        </div>
        <div class="comment-box">
          <span class="job-info">接单人:</span>
          <el-rate class="comment-info" v-model="scope.row.dealScore" :colors="colors" size="small" />
        </div>
      </template>
      <template #operation="scope">
        <el-button type="primary" :icon="Edit" text @click="handleOpenDetailDialog(OptEnum.EDIT, scope.row)"> 详情 </el-button>
        <el-button type="primary" :icon="Edit" text @click="handleOpenDialog(OptEnum.EDIT, scope.row)"> 编辑 </el-button>
        <el-button type="danger" :icon="Delete" text @click="handleDeleteItem(scope.row)">删除</el-button>
      </template>
    </ProTable>
    <JobDialog ref="dialogRef" @refresh-list="handleRefreshList" />
    <JobDetailDialog ref="detailDialogRef" @refresh-list="handleRefreshList" />
    <MtiPayDialog ref="mtiPayDialogRef" @refresh-list="handleRefreshList" />
  </div>
</template>
<script setup lang="ts">
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { h, reactive, ref } from "vue";
import { OptEnum, sysEnum, flagEnum } from "@/biz/eenum/appEnum";
import JobDialog from "../comm/job/JobDialog.vue";
import JobDetailDialog from "../comm/jobdetail/JobDetailDialog.vue";
import MtiPayDialog from "./components/MtiPayDialog.vue";
import { deleteFlexjobApi, getFlexjobsVoListApi } from "@/api/modules/cpyjob/flexjob";
import { useHandleData } from "@/hooks/useHandleData";
import { JobVo } from "@/biz/interface/JobType";
import { CirclePlus, Delete, House, Edit, Money, RefreshLeft } from "@element-plus/icons-vue";
import { ElDivider } from "element-plus";
import { flexJobStatusType } from "@/biz/datas/jobData";
import { filterEnum } from "@/utils";

const spacer = h(ElDivider, { direction: "vertical" });
const colors = ref(["#99A9BF", "#F7BA2A", "#FF9900"]);

const pTable = ref();
// 固定在列表中的参数
const initParam = reactive({});
// 表格列配置
const columns: Partial<ColumnProps>[] = [
  // { type: "index", width: 60, label: "#", fixed: "left" },
  { type: "selection", width: 60, fixed: "left" },
  {
    prop: "title",
    label: "岗位信息",
    search: { el: "input" }
  },
  {
    prop: "status",
    label: "状态",
    width: 100,
    enum: flexJobStatusType,
    search: { el: "select" }
  },
  {
    prop: "typeName",
    label: "岗位类型",
    width: 100
  },
  {
    prop: "priceAmt",
    label: "岗位费用",
    width: 100
  },
  {
    prop: "flagTalk",
    label: "可议价",
    width: 80
  },
  {
    prop: "jobDate",
    label: "岗位时间"
  },
  {
    prop: "applyCnt",
    label: "浏览/申请",
    width: 100,
    search: { el: "input" , label: "申请数"}
  },
  {
    prop: "worker",
    label: "成交价",
    width: 160
  },
  {
    prop: "comment",
    label: "评分",
    width: 200
  },
  {
    prop: "operation",
    fixed: "right",
    label: "操作",
    width: 300
  }
];

//刷新数据列表
const handleRefreshList = () => {
  pTable.value.getTableList();
};

//刷新数据列表
const clearTableSelect = () => {
  pTable.value.clearSelection();
};

// 删除信息
const handleDeleteItem = async (params: JobVo) => {
  await useHandleData(deleteFlexjobApi, { id: params.id! }, `删除【${params.title}】岗位信息`);
  pTable.value.getTableList();
};

const mtiPayDialogRef = ref();
const batchOfflinePay = (ids: string[]) => {
  let params = {
    optType: OptEnum.MTI_PAY,
    rowData: { ids }
  };
  mtiPayDialogRef.value.acceptParams(params);
};

// 打开 dialog(新增、查看、编辑)
const dialogRef = ref();
const handleOpenDialog = (optType: OptEnum, rowData?: { id: string }) => {
  let params = {
    optType: optType,
    rowData: { ...rowData }
  };
  dialogRef.value.acceptParams(params);
};

// 打开 dialog(新增、查看、编辑)
const detailDialogRef = ref();
const handleOpenDetailDialog = (optType: OptEnum, rowData?: { id: string }) => {
  let params = {
    optType: optType,
    rowData: { ...rowData }
  };
  detailDialogRef.value.acceptParams(params);
};
</script>
<style scoped lang="scss">
@import "./index.scss";
</style>
